import React from 'react'
import './Login.css'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import logo from '../images/logo.png'
import './Login.css'
import axios from 'axios';

const Login = (props) => {

  const onFinish = (e) => {
    const obj = {
      "user_name": e.username,
      "user_password": e.password
    }
    axios.post("http://192.168.72.166:8080/api/usersSignIn"
      , obj).then(res => {
        console.log(res.data)
        if (res.data.data.error) {
          message.error("用户名或密码错误，请重新输入")
        }
        else {//登入成功
          const data = res.data.data.user_name
          localStorage.setItem('data', data)
          props.history.replace('/home');//应该登入页面
        }
      })
  }
  const onBack = () => {
    props.history.replace('/');//跳转到首页
  }
  return (
    <div className='log-1'>
      <div className='log-3'>格物衍艺</div>
      <div className='log-2'>
        <Form
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          className="from"
        >
          <img src={logo} />
          <p className='p'>欢 迎 登 入</p>
          {/* <Provider> */}
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入您的账号',
              },
            ]}
          >
            <Input prefix={<UserOutlined />} placeholder="账号" />
          </Form.Item>
          {/* </Provider> */}

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入您的密码!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
          <Form.Item>
            <Button block onClick={onBack}>
              取消
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )

}
export default Login;
